<script>
import { computed, defineComponent, reactive, toRaw, watch } from 'vue'
import { tagList } from '@Config/server/api'
import { findIndex, flattenDeep } from 'lodash'
import * as Antd from 'ant-design-vue'
export default defineComponent({
  /**
    *
    * id: 1 //分类ID
    name: "种类"//分类名称
    pid: 0,//暂无用处
    child:[
      {
        id: 16//标签ID
        name: "222111"//标签名称
        pid: 1//分类ID
      }
  ]
 *
 */
  emits: ['select'],
  props: {
    selectedList: {
      //选中的集合
      type: Array,
      default: () => {
        return []
        /**
         * id: 16//标签ID
          name: "222111"//标签名称
          pid: 1//分类ID
         *
         */
      },
    },
  },
  setup(props, context) {
    let tags = reactive({ data: [] })
    //获取所有tags
    tagList({ size: 100000, index: 1 }).then((_tags) => {
      tags.data = _tags.data.records.map((x) => {
        x.child.map((xx) => {
          xx.selected = false //是否选中 状态，默认为false
          return xx
        })
        return x
      })
    })

    let clickHandler = (cate, tag) => {
      tag.loading = true
      context.emit('select', {
        tag: [toRaw(tag)],
        cate: toRaw(cate),
        model: tag.selected == false ? 1 : 0, //1添加 0删除
      })
    }

    //批量选择
    let selectOneCateAllChild = (e) => {
      e.child.map((x) => (x.loading = true))
      context.emit('select', {
        tag: toRaw(e.child),
        cate: toRaw(e),
        model: 1, //执行操作 1添加,0删除
      })
    }

    let unSelectOneCateAllChild = (e) => {
      e.child.map((x) => (x.loading = true))
      context.emit('select', {
        tag: toRaw(e.child),
        cate: toRaw(e),
        model: 0, //执行操作 1添加,0删除
      })
    }
    // watch(
    //   () => props.selectedList,
    //   () => {
    //     console.log(props.selectedList)
    //   },
    //   {
    //     deep: true,
    //     immediate: true,
    //   }
    // )

    return {
      tags,
      clickHandler,
      props,
      selectOneCateAllChild,
      unSelectOneCateAllChild,
    }
  },
  render() {
    return (
      <Antd.Row>
        <Antd.Col span={24}>
          {this.tags.data.map((x) => {
            return (
              <div class="oneTags">
                <div class="oneTagsName">
                  <Antd.Space size="small">
                    <span>{x.name}</span>
                    {
                      //   <Antd.Button
                      //   type="link"
                      //   onClick={(e) => this.selectOneCateAllChild(x)}
                      // >
                      //   全选
                      // </Antd.Button>
                      // <Antd.Button
                      //   type="link"
                      //   onClick={(e) => this.unSelectOneCateAllChild(x)}
                      // >
                      //   取消全选
                      // </Antd.Button>
                    }
                  </Antd.Space>
                </div>
                <Antd.Space class="oneTagsList">
                  {x.child.map((xx) => {
                    let _index = findIndex(this.props.selectedList, {
                      tagId: xx.id,
                    })
                    if (_index >= 0) {
                      xx.selected = true
                    } else {
                      xx.selected = false
                    }
                    return (
                      <Antd.Button
                        loading={xx.loading}
                        size="small"
                        {...(xx.selected == true ? { type: 'primary' } : {})}
                        onClick={() => {
                          //xx.loading = true
                          this.clickHandler(x, xx)
                        }}
                      >
                        {xx.name}
                      </Antd.Button>
                    )
                  })}
                </Antd.Space>
              </div>
            )
          })}
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>

<style scoped>
.oneTags,
.oneTagsName {
  width: 100%;
  overflow: hidden;
}
.oneTags {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 10px;
}
.oneTagsName {
  font-weight: bold;
  padding: 5px 0px 5px 0px;
}
.oneTagsName {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}
</style>
